<template>
  <div>
    <a-card class="card" title="被撬商品" :bordered="false">
      <a-table
        :columns="columns"
        :rowKey="goodsList => goodsList.jdg_id"
        :dataSource="goodsList"
        :pagination="false"
        :loading="loading"
      >
        <div slot="info" slot-scope="row">
          <div class="ant-list-item-meta">
            <div class="ant-list-item-meta-avatar">
              <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-image">
                <img :src="'https://img14.360buyimg.com/n1/'+row.jdg_image_url" />
              </span>
            </div>
            <div class="ant-list-item-meta-content">
              <div class="ant-list-item-meta-description">
                <a target="_blank" :href="'//item.jd.com/'+row.jdg_sku_id+'.html'"><span class="detail-name">{{ row.jdg_sku_name }}</span></a>
                <span style="color:#000">￥{{ row.jdg_price }}</span>
                <span style="margin-left:20px">{{ row.jdg_shop_name }}</span>
              </div>
            </div>
          </div>
        </div>
        <div slot="coupon" slot-scope="row">
          <div v-if="row.jdg_send_num">
            ￥{{ row.jdg_coupon_amount }}
            <br />
            发量/总量：{{ row.jdg_now_count }}/{{ row.jdg_send_num }}
            <br />
            期限：{{ row.jdg_coupon_start_date }}-{{ row.jdg_coupon_end_date }}
          </div>
        </div>
        <div slot="time" slot-scope="row">{{ row.jdg_start_time }}<br>{{ row.jdg_end_time }}</div>
        <span slot="commRate" slot-scope="row">{{ row.jdg_commission_rate }}% | <span style="color:#f5222d">{{ row.jdg_new_rate }}%</span></span>
        <span slot="service" slot-scope="row">{{ row.jdg_service_rate }}%</span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { lossGoods } from '@/api/detail'
const columns = [
  {
    title: '商品信息',
    width: 500,
    scopedSlots: { customRender: 'info' }
  }, {
    title: '排期时间',
    scopedSlots: { customRender: 'time' }
  }, {
    title: '佣金比率',
    scopedSlots: { customRender: 'commRate' }
  }, {
    title: '服务费率',
    scopedSlots: { customRender: 'service' }
  }, {
    title: '优惠券',
    scopedSlots: { customRender: 'coupon' }
  }
]
export default {
  name: 'LossDetail',
  data () {
    return {
      description: '商品被撬走的列表。',
      columns,
      loading: false,
      skeLoading: true,
      goodsList: []
    }
  },
  created () {
    // console.log(this.goodsList[0].goodsList1)
    this.getLossDetail()
  },
  methods: {
    getLossDetail () {
      this.loading = true
      lossGoods()
        .then(res => {
          this.goodsList = res.result
          this.loading = false
          this.skeLoading = false
        })
        .catch(err => {
          // this.loading = false
          console.log(err)
        })
    }
  }
}
</script>
<style>
.detail-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 16px;
  margin-bottom: 5px;
}
</style>
